import React, { useState } from 'react';
import { Typography, Card, Row, Col, Button, Carousel, Statistic, Form, Input, Select, message } from 'antd';
import {
  RobotOutlined,
  MedicineBoxOutlined,
  FileSearchOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { createFeedback } from '@/api/feedback';
import styles from './styles.module.less';

// 导入图片
import banner1 from '../../assets/images/banner/banner1.png';
import banner2 from '../../assets/images/banner/banner2.png';
import banner3 from '../../assets/images/banner/banner3.png';
import article1 from '../../assets/images/articles/article1.png';
import article2 from '../../assets/images/articles/article2.png';
import article3 from '../../assets/images/articles/article3.png';
import article4 from '../../assets/images/articles/article4.png';
import article5 from '../../assets/images/articles/article5.png';
import article6 from '../../assets/images/articles/article6.png';

const { Title, Paragraph } = Typography;
const { TextArea } = Input;
const { Option } = Select;

const HomePage: React.FC = () => {
  const [form] = Form.useForm();
  const [submitting, setSubmitting] = useState(false);

  // 轮播图数据
  const bannerItems = [
    {
      title: '智能问诊',
      desc: '24小时AI智能问诊，快速获取专业建议',
      image: banner1,
      link: '/ai/consultation',
    },
    {
      title: '药品查询',
      desc: '全面的药品信息库，助您了解用药知识',
      image: banner2,
      link: '/medicine/list',
    },
    {
      title: '疾病查询',
      desc: '专业的疾病信息，帮助您了解病症',
      image: banner3,
      link: '/disease/list',
    },
  ];

  // 平台数据统计
  const statistics = [
    { title: '注册用户', value: '10000+', prefix: <TeamOutlined /> },
    { title: '在线问诊', value: '5000+', prefix: <RobotOutlined /> },
    { title: '药品数量', value: '2000+', prefix: <MedicineBoxOutlined /> },
    { title: '疾病数据', value: '1000+', prefix: <FileSearchOutlined /> },
  ];

  // 健康资讯数据
  const articles = [
    {
      id: 1,
      title: '秋冬季节如何增强免疫力',
      description: '通过合理饮食、规律作息和适度运动，提升身体抵抗力，预防感冒等疾病...',
      image: article1,
      tag: '健康生活'
    },
    {
      id: 2,
      title: '高血压患者的饮食指南',
      description: '科学调整饮食结构，控制盐分摄入，选择有助于降压的健康食材...',
      image: article2,
      tag: '疾病管理'
    },
    {
      id: 3,
      title: '中医养生：四季养生要点',
      description: '根据四季特点调整起居作息，合理搭配饮食，保持身心健康平衡...',
      image: article3,
      tag: '中医养生'
    },
    {
      id: 4,
      title: '科学用药的十大原则',
      description: '正确认识药品说明书，了解用药时间、剂量和注意事项，避免不良反应...',
      image: article4,
      tag: '用药指南'
    },
    {
      id: 5,
      title: '居家康复指导手册',
      description: '常见疾病的居家康复方法，包括运动指导、饮食建议和心理调适...',
      image: article5,
      tag: '康复指导'
    },
    {
      id: 6,
      title: '心理健康：压力管理技巧',
      description: '学会识别压力源，掌握减压方法，培养积极心态，保持心理健康...',
      image: article6,
      tag: '心理健康'
    }
  ];

  // 处理反馈提交
  const handleFeedbackSubmit = async (values: any) => {
    try {
      setSubmitting(true);
      await createFeedback(values);
      message.success('感谢您的反馈！');
      form.resetFields();
    } catch (error) {
      message.error('提交失败，请稍后重试');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className={styles.homePage}>
      {/* Banner区域 */}
      <section className={styles.banner}>
        <Carousel autoplay>
          {bannerItems.map((item, index) => (
            <div key={index}>
              <div className={styles.bannerItem} style={{ backgroundImage: `url(${item.image})` }}>
                <div className={styles.bannerContent}>
                  <Title level={2}>{item.title}</Title>
                  <Paragraph>{item.desc}</Paragraph>
                  <Link to={item.link}>
                    <Button type="primary" size="large">
                      立即体验
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </Carousel>
      </section>

      {/* 数据统计 */}
      <section className={styles.statistics}>
        <Row gutter={[24, 24]} justify="center">
          {statistics.map((stat, index) => (
            <Col key={index} xs={12} sm={6}>
              <Card bordered={false}>
                <Statistic
                  title={stat.title}
                  value={stat.value}
                  prefix={stat.prefix}
                />
              </Card>
            </Col>
          ))}
        </Row>
      </section>

      {/* 健康资讯 */}
      <section className={styles.articles}>
        <Title level={2} className={styles.sectionTitle}>健康资讯</Title>
        <Row gutter={[24, 24]}>
          {articles.map((article) => (
            <Col key={article.id} xs={24} sm={12} md={8}>
              <Card
                hoverable
                cover={<img alt={article.title} src={article.image} />}
                className={styles.articleCard}
              >
                <div className={styles.articleTag}>{article.tag}</div>
                <Card.Meta
                  title={article.title}
                  description={article.description}
                />
              </Card>
            </Col>
          ))}
        </Row>
      </section>

      {/* 意见反馈 */}
      <section className={styles.feedback}>
        <Title level={2} className={styles.sectionTitle}>意见反馈</Title>
        <Row>
          <Col span={24}>
            <Card className={styles.feedbackCard}>
              <Row gutter={[24, 0]}>
                <Col xs={24} md={8}>
                  <div className={styles.feedbackInfo}>
                    <Title level={3}>您的建议</Title>
                    <Paragraph>
                      我们期待听到您的声音！无论是产品建议、功能异常还是使用咨询，您的反馈都将帮助我们提供更好的服务。
                    </Paragraph>
                    <ul className={styles.feedbackTips}>
                      <li>详细描述您的问题或建议</li>
                      <li>选择合适的反馈类型</li>
                      <li>我们会认真处理每一条反馈</li>
                    </ul>
                  </div>
                </Col>
                <Col xs={24} md={16}>
                  <Form
                    form={form}
                    layout="vertical"
                    onFinish={handleFeedbackSubmit}
                    className={styles.feedbackForm}
                  >
                    <Form.Item
                      name="type"
                      label="反馈类型"
                      rules={[{ required: true, message: '请选择反馈类型' }]}
                    >
                      <Select placeholder="请选择反馈类型">
                        <Option value={1}>产品建议</Option>
                        <Option value={2}>功能异常</Option>
                        <Option value={3}>使用咨询</Option>
                        <Option value={4}>其他</Option>
                      </Select>
                    </Form.Item>
                    <Form.Item
                      name="content"
                      label="反馈内容"
                      rules={[
                        { required: true, message: '请输入反馈内容' },
                        { max: 1000, message: '反馈内容最多1000字' }
                      ]}
                    >
                      <TextArea
                        placeholder="请详细描述您的问题或建议..."
                        rows={6}
                        maxLength={1000}
                        showCount
                      />
                    </Form.Item>
                    <Form.Item>
                      <Button type="primary" htmlType="submit" loading={submitting} size="large">
                        提交反馈
                      </Button>
                    </Form.Item>
                  </Form>
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
      </section>
    </div>
  );
};

export default HomePage; 